<template name="emojiPicker">
	<div class="emoji-picker rc-popover__content">
		<div class="emoji-top">
			<div class="rc-input">
				<label class="rc-input__label">
					<div class="rc-input__wrapper">
						<div class="rc-input__icon">
							{{> icon block="rc-input__icon-svg" icon="magnifier" }}
						</div>
						<input name="name" type="text" class="rc-input__element js-emojipicker-search" placeholder="{{_ "Search"}}" autofocus autocomplete="off">
					</div>
				</label>
			</div>
			<div class="change-tone">
				<a href="#change-tone"><span class="current-tone {{currentTone}}"></span></a>
				<ul class="tone-selector secondary-background-color">
					<li><a href="#tone" class="tone" data-tone="0"><span class="tone-0"></span></a></li>
					<li><a href="#tone" class="tone" data-tone="1"><span class="tone-1"></span></a></li>
					<li><a href="#tone" class="tone" data-tone="2"><span class="tone-2"></span></a></li>
					<li><a href="#tone" class="tone" data-tone="3"><span class="tone-3"></span></a></li>
					<li><a href="#tone" class="tone" data-tone="4"><span class="tone-4"></span></a></li>
					<li><a href="#tone" class="tone" data-tone="5"><span class="tone-5"></span></a></li>
				</ul>
			</div>
		</div>
		<div class="filter">
			<ul class="filter-list">
				{{#each category in emojiCategories}}
					<li class="filter-item border-secondary-background-color {{activeCategory category.key}}" title="{{_ category.i18n}}">
						<a href="#{{category.key}}" class="category-link color-info-font-color"><i class="category-icon icon-{{category.key}}"></i></a>
					</li>
				{{/each}}
			</ul>
		</div>
		<div class="emojis">
			{{#if searching}}
				{{{searchResults}}}
			{{else}}
				{{#each category in emojiCategories}}
					<h4 class="emoji-list-category" id="emoji-list-category-{{category.key}}">{{_ category.i18n}}</h4>
					<ul class="emoji-list emoji-category-{{category.key}}">
						{{{emojiList category.key}}}
					</ul>
				{{/each}}
			{{/if}}
		</div>
		<div class="emoji-footer">
			{{#if hasPermission 'manage-emoji'}}<a class="add-custom" href="/admin/emoji-custom">{{_"Add_custom_emoji"}}</a>{{/if}}
			{{{_"Emoji_provided_by_JoyPixels"}}}
		</div>
	</div>
</template>
